<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/base :: Layout(~{::content},~{::title}, _,_,_,_,_,_,_,~{::scripts},~{::messageMenu})}">

<title>消息路由管理</title>
<content>
    <div class="layui-tab-brief layui-tab">
        <ul class="layui-tab-title site-demo-title">
            <li class="layui-this"><a><cite>路由列表</cite></a></li>
        </ul>
    </div>
    <div class="layui-fluid"layui-card-body style="padding: 15px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">

                    <div class="layui-card-body">
                        <table class="layui-hide" id="messageRoutingTable" lay-filter="buttons"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</content>

<dd class="layui-this" th:fragment="messageMenu">
    <a href="/pages/messageRouting">消息路由管理</a>
</dd>
<div th:fragment="scripts">

    <script th:inline="none" type="text/html" id="barDemo">
<!--        <button class="layui-btn layui-btn-xs" lay-event="detail">查看</button>-->
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </script>

    <script type="text/html" id="layerRefresh">
        <div class="layui-btn-container">
            <button id="createButton"
                    class="layui-btn layui-btn-normal layui-btn-radius"
                    lay-event="createMessageRouting">
                添加路由
            </button>
            <button id="refreshButton"
                    class="layui-btn layui-btn-checked layui-btn-radius"
                    lay-event="refresh">
                刷新
            </button>
        </div>
    </script>


    <script th:inline="none">
        layui.use('table', function () {
            var table = layui.table;

            var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
            //第一个实例
            table.render({
                elem: '#messageRoutingTable',
                url: '/api/messageRoutings/', //数据接口
                page: true,  //开启分页
                toolbar: '#layerRefresh',
                defaultToolbar:['exports', 'print'],
                //width: 1200,
                cols: [
                    [ //表头
                        // {type: 'checkbox'},

                        {field: 'messageRoutingId', title: '路由Key', sort: true, align: 'center'},
                        {field: 'messageRoutingName', title: '路由名称', align: 'center'},
                        {field: 'deviceName', title: '设备名称', align: 'center'},
                        {field: 'messageRoutingType', title: '路由类型', align: 'center'},
                        {field: 'messageRoutingAdress', title: '路由地址', align: 'center'},
                        {field: 'messageRoutingPort', title: '路由地址端口', align: 'center'},
                        {field: 'messageRoutingCreateTime', title: '添加时间', sort: true, align: 'center'},
                        {
                            title: '操作', align: 'center',
                            toolbar: '#barDemo'
                        }
                    ]
                ]
            });

            // 头工具栏事件
            table.on('toolbar(buttons)', function (obj) {

                var checkStatus = table.checkStatus('test');
                switch (obj.event) {
                    case 'createMessageRouting':
                        notice();
                        break;
                    case 'refresh':
                        table.reload("messageRoutingTable")

                        break;
                }
                ;
            });

            //监听工具条
            table.on('tool(buttons)', function (obj) {

                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {

                        $.ajax({
                            type: "delete",
                            url: "/api/messageRouting",
                            async: false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                            data: JSON.stringify({'messageRoutingId': data.messageRoutingId}),
                            contentType: "application/json",
                            // processData: false,
                            // cache: false,
                            success: function (ev) {
                                if (ev.data == "删除成功") {
                                    obj.del();
                                    layer.msg(ev.data);
                                    layer.close(index);
                                    table.reload("messageRoutingTable")
                                } else {
                                    layer.msg(ev.data);
                                    layer.close(index);
                                }
                            },
                            error:function(ev){
                                console.log("删除失败"+ev.responseText);
                                layer.msg("删除失败");
                                layer.close(index);
                            }

                        });
                    });
                }
            });

            //触发创建产品弹出层

            function notice(){
                //示范一个公告层
                layer.open({
                    type: 2
                    ,
                    title: "添加消息路由"
                    ,
                    closeBtn: 1
                    ,
                    area: ['600px', '600px']
                    ,
                    shade: 0.3
                    ,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btn: ['提交', '重置', '取消']
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 1 //拖拽模式，0或者1
                    ,
                    content: '/pages/messageRoutingCreate'
                    ,
                    // success: function (layero) {
                    //     var btn = layero.find('.layui-layer-btn');
                    //     btn.find('.layui-layer-btn0').attr({
                    //         href: 'http://www.layui.com/'
                    //         , target: '_blank'
                    //     });
                    // }
                    yes: function (index, layero) {

                        // 获取弹出层中的form表单元素
                        var formSubmit = layer.getChildFrame('form', index);
                        // // 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
                        var submited = formSubmit.find('button')[0];
                        // // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
                        submited.click();
                        // layer.close(index);
                        // 弹出层关闭的操作在子层的js代码中完成

                    },
                    btn2: function (index, layero) {
                        //按钮【重置】的回调
                        // 获取弹出层中的form表单元素
                        var formSubmit = layer.getChildFrame('form', index);
                        // // 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
                        var submited = formSubmit.find('button')[1];
                        submited.click();
                        return false;
                    }
                });
            };
        });

    </script>


</div>
</html>

